import React, { ReactNode } from 'react'
import { Button } from 'antd'
import { PageContainer } from 'src/components/pageContainer'
import { Jumbotron } from 'src/components/jumbotron'
import style from './style.module.scss'
import { Route, RouteComponentProps } from 'react-router'
import { SignTeamCreate } from './sub/createTeamPage'
import { SignConfirmInfo } from './sub/confirmInfoPage'
import { SignCongratulations } from './sub/congratulationsPage'
import { SignHeader } from './header'
import { mockConfirmData } from './mock'
import QueueAnim from 'rc-queue-anim'

interface SignPageProps extends RouteComponentProps {
}

interface SignPageState {
    raceName: string;
    step: number;
    teamForm: {
        teamName: string;
        teacher: string;
    };
}

export class SignPage extends React.Component<SignPageProps, SignPageState> {
    constructor (props: SignPageProps) {
        super(props)
        this.state = {
            raceName: '2020年第十届MathorCup高校数学建模挑战赛',
            step: 0,
            teamForm: {
                teamName: '',
                teacher: ''
            }
        }
    }

    teacherChange = (value: string): void => {
        this.setState(({ teamForm }) => ({
            teamForm: {
                teamName: teamForm.teamName,
                teacher: value
            }
        }))
    }

    handleClickNextBtn = (): void => {
        const match = this.props.match.url
        const step = this.getPageUrl()
        switch (step) {
        case 'create':
            this.props.history.push(`${match}/confirm`)
            break
        case 'confirm':
            this.props.history.push(`${match}/congratulates`)
            break
        default:
            // TODO 提交表单
            break
        }
    }

    getPageUrl = (): string => {
        const urlSplit: string[] = this.props.location.pathname.split('/')
        return urlSplit[urlSplit.length - 1]
    }

    getPageStage = (): number => {
        const url = this.getPageUrl()
        switch (url) {
        case 'create':
            return 0
        case 'confirm':
            return 1
        default:
            return 2
        }
    }

    handleClickBackBtn = (): void => {
        this.props.history.goBack()
    }

    render (): ReactNode {
        const currentURL = this.props.match.url
        return (
            <div>
                <Jumbotron title={'报名参赛'} subTitle={this.state.raceName}/>
                <QueueAnim delay={100}>
                    <PageContainer header={<SignHeader current={this.getPageStage()}/>} shadow key={'container'}
                        style={{ marginBottom: '100px' }}>
                        <QueueAnim delay={500} leaveReverse>
                            <Route exact path={`${currentURL}/create`} key={'route-create'}
                                render={(): ReactNode =>
                                    <SignTeamCreate
                                        raceName={this.state.raceName}
                                        teacherChange={this.teacherChange}/>}/>
                            <Route exact path={`${currentURL}/confirm`} key={'route-confirm'}
                                render={(): ReactNode => <SignConfirmInfo {...mockConfirmData}/>}/>
                            <Route exact path={`${currentURL}/congratulates`} key={'route-congratulation'}
                                render={(): ReactNode => <SignCongratulations/>}
                            />
                            <div className={style.buttonGroup} key={'btn'}>
                                <Button onClick={this.handleClickBackBtn}>上一步</Button>
                                {
                                    this.getPageUrl() !== 'congratulates'
                                        ? <Button type={'primary'}
                                            onClick={this.handleClickNextBtn}>
                                            下一步
                                        </Button> : null
                                }
                            </div>
                        </QueueAnim>
                    </PageContainer>
                </QueueAnim>
            </div>
        )
    }
}

export default SignPage
